<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import RecipeImage from '@/components/RecipeImage/index.vue'
import RecipePopover from './RecipePopover.vue'
import { Flame } from '@vicons/ionicons5'

import type { IRecipe } from '@/stores/types'

const props = defineProps<{
  recipes: IRecipe[]
}>()

const page = ref(1)
const pageSize = ref(20)

const tableData = computed(() => {
  const size = pageSize.value
  const start = (page.value - 1) * size
  return props.recipes.slice(start, start + size)
})

watch(
  () => props.recipes.length,
  (newLen) => {
    // 只有当总数量变化导致当前页超出范围时才重置
    const maxPage = Math.max(1, Math.ceil(newLen / pageSize.value))
    if (page.value > maxPage) {
      page.value = maxPage
    }
  },
)
</script>

<template>
  <n-flex vertical>
    <n-flex v-if="recipes.length">
      <n-card class="w-[200px]" size="small" v-for="recipe in tableData" :key="recipe.recipeId">
        <RecipePopover :id="recipe.recipeId">
          <n-flex>
            <RecipeImage :id="recipe.recipeId" />
            <n-flex vertical :size="6">
              <b>{{ recipe.name }}</b>
              <n-flex :size="0">
                <n-icon color="#E75F3E" :size="20" v-for="f in recipe.rarity" :key="f">
                  <Flame />
                </n-icon>
              </n-flex>
            </n-flex>
            <i class="number">{{ recipe.galleryId }}</i>
          </n-flex>
        </RecipePopover>
      </n-card>
    </n-flex>
    <n-empty v-else description="空空如也~" class="py-[24px]"></n-empty>
    <n-pagination
      v-model:page="page"
      :item-count="recipes.length"
      :page-size="pageSize"
      show-quick-jumper
    />
  </n-flex>
</template>

<style lang="scss" scoped>
.number {
  position: absolute;
  top: 0;
  right: 6px;
  z-index: 1;
  color: #88563e;
}
</style>
